<template>
  <div>
    <Filters></Filters>
    <MyTable>
      <template #thead>
        <th v-for="(item,index) in tableColumn" :key="index">{{item}}</th>
      </template>
      <template #tbody>
        <tr v-for="(item,index) in table" :key="index">
          <td>{{item.name}}</td>
          <td>{{item.price}}</td>
          <td>{{item.num}}</td>
        </tr>
      </template>
    </MyTable>
    <div class="list">
      <h3>加载更多</h3>
      <ul>
        <li v-for="(item,index) in list" :key="index">
          <p>序号：{{item.id}}</p>
          <p>名称：{{item.title}}</p>
          <img :src="item.url" alt="">
        </li>
      </ul>
      <div v-if="showMore">加载更多......</div>
      <div v-else>已无更多</div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import MyTable from './components/MyTable.vue'
import Filters from './components/Filters.vue'
export default {
  data(){
    return {
      tableColumn:["商品","价格","数量"],
      table:[
          {
              name: '麦肯锡问题分析与解决技巧',
              price:34.60,
              num:1,
          },
          {
              name: '极简思维：颠覆传统思维模式的极简法则',
              price:31.50,
              num:1,
          },
          {
              name: '沃顿商学院最受欢迎的思维课+谈判课+哈佛商学院最受欢迎的营销课+领导',
              price:184.50,
              num:1,
          }
      ],
      list:[],
      showMore:false,
      nowPage:1
    }
  },
  components: {
    MyTable,
    Filters
  },
  mounted(){
    this.init()
    window.addEventListener("scroll",this.scrollMore)
  },
  methods:{
    init(){
      axios.get('http://jsonplaceholder.typicode.com/photos').then(res=>{
        if(res.data.length<=10){
          this.list = res.data
          this.showMore = false
        }else{
          this.list = res.data.slice(0,10); //slice(start,end) 方法可从已有的数组中返回选定的元素。
          this.showMore = true
        }
      })
    },
    scrollMore(){
      const scrollY = document.documentElement.scrollTop || document.body.scrollTop;
      const allHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
      const viewHeight = document.documentElement.clientHeight || document.body.clientHeight;
      if(scrollY + viewHeight >= allHeight){
        this.showMoreList();
      }
    },
    showMoreList(){
      axios.get('http://jsonplaceholder.typicode.com/photos').then(res=>{
        this.list = this.list.concat(res.data.slice(this.nowPage * 10,(this.nowPage + 1)*10))
        this.nowPage++;
        if(res.data.length >= this.nowPage*10){
          this.showMore = true
        }else{
          this.showMore = false
        }
      })
    }
  }
}
</script>

<style>
img{
  width: 150px;
  height: 150px;
}
</style>
